<template>
  <div class="container">
    <!-- <h1>Login</h1> -->
    <div class="box">
      <div class="left">
        <img src="../assets/login.png" alt="" style="width: 100%" />
      </div>
      <div class="right">
        <div class="nav">
          <h1>登录</h1>
        </div>
        <div class="content">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-form
              :model="loginUser"
              style="width: 80%"
              :rules="loginRules"
              ref="loginRef"
            >
              <!-- <el-icon><User /></el-icon> -->
              <el-form-item prop="userAccount">
                <el-input
                  prefix-icon="User"
                  placeholder="请输入账号"
                  v-model="loginUser.userAccount"
                />
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  prefix-icon="Lock"
                  v-model="loginUser.password"
                  :type="Flag ? 'text' : 'password'"
                  placeholder="请输入密码"
                >
                  <template #suffix>
                    <el-icon
                      v-show="!isShow"
                      style="cursor: pointer"
                      size="18px"
                      @click="
                        isShow = !isShow;
                        Flag = !Flag;
                      "
                      ><View
                    /></el-icon>
                    <el-icon
                      v-show="isShow"
                      style="cursor: pointer"
                      size="18px"
                      @click="
                        isShow = !isShow;
                        Flag = !Flag;
                      "
                      ><Hide
                    /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="code">
                <div style="display: flex">
                  <!-- <el-icon><CircleCheck /></el-icon> -->
                  <el-input
                    prefix-icon="CircleCheck"
                    v-model="loginUser.code"
                    placeholder="验证码"
                  />
                  <div style="width: 100px; height: 40px; margin-left: 10px">
                    <img
                      :src="captchaUrl"
                      style="cursor: pointer"
                      @click="refreshCode"
                    />
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="footer">
          <div class="top">
            <el-button @click="submit" style="width: 270px; height: 40px"
              >登录</el-button
            >
          </div>
          <div class="bottom">
            <div style="flex: 1; margin-left: 10px">
              还没有账号？请
              <span
                style="color: #0f9876; cursor: pointer"
                @click="router.push('/register')"
                >注册</span
              >
            </div>
            <div style="flex: 1; text-align: right">
              <span
                style="color: #0f9876; cursor: pointer; margin-right: 10px"
                @click="router.push('/forget')"
                >忘记密码</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, ref } from "vue";
import router from "../router";
// import ref from 'vue';
import { login } from "../api/login";
const loginRef = ref(null);

const captchaUrl = ref("http://localhost:8080/api/captcha/getCaptcha");
const loginUser = ref({
  userAccount: "",
  password: "",
  code: "",
});
const Flag = ref(false);
const isShow = ref(false);
const refreshCode = () => {
  // captchaUrl.value = await getCaptcha()
  //  await  getCaptcha()
  //  console.log(res)
  captchaUrl.value =
    "http://localhost:8080/api/captcha/getCaptcha?t=" + new Date().getTime();
};
const loginRules = reactive({
  userAccount: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 4, max: 12, message: "长度在 4 到 12 个字符", trigger: "blur" },
    {
      patten: /^\w{4,12}$/,
      message: "账户只能包含字母、数字和下划线",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 4, max: 12, message: "长度在 4 到 12 个字符", trigger: "blur" },
    {
      patten: /^\w{4,12}$/,
      message: "密码只能包含字母、数字和下划线",
      trigger: "blur",
    },
  ],
  code: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { min: 5, max: 5, message: "长度为 4 个字符", trigger: "blur" },
  ],
});

//定时器
const intervalId = ref();
//加载
onMounted(async () => {
  // 设置定时器,定时保存
  intervalId.value = setInterval(() => {
    // console.log()
    // 执行要重复执行的逻辑
    refreshCode();
  }, 60 * 1000); //每一分钟自动刷新验证码
});
onUnmounted(() => {
  // 清除定时器
  if (intervalId.value) {
    clearInterval(intervalId.value);
  }
});

refreshCode();

const submit = async () => {
  console.log(loginUser.value);
  const res = await login(loginUser.value);
  if (res.code == 200) {
    console.log("登录成功");
    // alert('登录成功')
    localStorage.setItem("user", JSON.stringify(res.data));
    router.push("/home");
    ElMessage({
      showClose: true,
      message: "登陆成功",
      type: "success",
    });
  } else {
    ElMessage({
      showClose: true,
      message: res.msg,
      type: "error",
    });
  }
  console.log(res);
};
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: grey;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 680px;
  height: 340px;
  background-color: white;
  border-radius: 0 10px 10px 0;
  display: flex;
}
.left {
  width: 50%;
  height: 100%;
  /* background-color: #f5f5f5; */
}
.right {
  width: 50%;
  height: 100%;
  /* background-color: bisque; */
  border-radius: 0 10px 10px 0;
}
.nav {
  width: 100%;
  height: 80px;
  /* background-color: yellow; */
  line-height: 80px;
  text-align: center;
}
.content {
  width: 100%;
  height: 160px;
  /* background-color: red; */
  /* display: flex; */
}
.footer {
  width: 100%;
  height: 80px;
  /* background-color: green; */
  /* display: flex; */
  /* justify-content: center;
    align-items: center; */
}
.top {
  width: 100%;
  height: 40px;
  /* background-color: blue; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom {
  width: 100%;
  height: 40px;
  /* background-color: purple; */
  display: flex;
  line-height: 40px;
}
</style>